<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .grid {
            margin: 100px auto;
            width: 500px;
            text-align: center;
        }
        
        .grid table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .grid th,
        td {
            padding: 10;
            border: 1px dashed orange;
            height: 35px;
            line-height: 35px;
        }
        
        .grid th {
            background-color: orange;
        }
        
        .grid .book,
        .grid .count {
            padding-bottom: 10px;
            padding-top: 5px;
            background-color: #F3DCAB;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="grid">
            <div class="book">
                <label for="id">编号:</label>
                <input type="text" v-model='id' :disabled='true' v-focus>
                <label for="name">书名:</label>
                <input type="text" v-model.lazy='name'>
                <button v-on:click='addBooks' :disabled='subflag'>添加</button>
            </div>
            <div class="count">
                <span>图书总数:</span>
                <span>{{total}} 本</span>
            </div>
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr :key='item.id' v-for='(item,i) in books'>
                        </td>
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date | datefm('yyyy-mm-dd') }}</td>
                        <td>
                            <a href="" v-on:click.prevent='editBooks(item)'>修改</a>
                            <span>|</span>
                            <a href="" v-on:click.prevent='delBooks(item.id)'>删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>

<script type="text/javascript" src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="js/time.js"></script>
<script type="text/javascript">
    // 自定义指令
    Vue.directive('focus', {
        inserted(el) {
            el.focus()
        }
    })

    // 过滤器 转化日期格式
    Vue.filter('datefm', function(time, format) {
        return dateFormat(time, format)
    })

    // 优化 
    // 提取公共域名
    axios.defaults.baseURL = 'http://127.0.0.1:3000'
        // 利用拦截器配置响应返回数据
    axios.interceptors.response.use(function(res) {
        return res.data
    })


    var vm = new Vue({
        el: '#app',
        data: {
            flag: false,
            subflag: false,
            id: '',
            name: '',
            books: []
        },
        // 模拟请求数据 页面一打开就请求  所以在created里面
        created: function() {
            this.getBooks()
        },
        methods: {
            // 因为created里不适合写太多东西 因此把发送请求写在methods里面 然后再调用函数
            // 获取图书数据 并赋值给books
            async getBooks() {
                this.books = await axios.get('/books')
            },

            // 添加图书或修改图书
            async addBooks() {
                if (this.flag) {
                    var data = await axios.put('/books/' + this.id, {
                        name: this.name
                    })
                    console.log(data);
                    if (data.status == 200) {
                        this.getBooks()
                    }
                    this.id = ''
                    this.name = ''
                } else {
                    // 添加图书
                    // 删除原本添加的代码  发送请求
                    var data = await axios.post('/books', {
                        name: this.name
                    })
                    console.log(data);
                    if (data.status == 200) {
                        this.getBooks()
                    }
                    this.id = ''
                    this.name = ''
                }
            },
            // 修改图书 功能是把数据渲染到编辑框
            async editBooks(item) {
                var data = await axios.get('/books/' + item.id)
                console.log(data);
                this.id = data.id
                this.name = data.name
                this.flag = true
            },

            async delBooks(id) {
                var data = await axios.delete('/books/' + id)
                console.log(data);
                if (data.status == 200) {
                    this.getBooks()
                }
            }
        },
        watch: {
            // 监视图书书名是否存在
            name: async function(val) {
                var data = await axios.get('/books/book/' + val)
                console.log(data);
                // 存在时禁用提交按钮
                if (data.status == 2) {
                    this.subflag = false
                } else {
                    this.subflag = true
                }

            }
        },
        computed: {
            total() {
                return this.books.length
            }
        }
    });
</script>

</html>